<!-- 上传文件 -->
<template>
  <div class="upload-box">
    <el-upload :before-upload="uploadChange">
      <el-button class="upload-btn" type="primary"
        >{{ props.name }}
        <!-- <img style="margin-left: 10px " src="@/assets/images/icons/icon-upload.png" width="14" height="14" /> -->
      </el-button>
    </el-upload>
    <slot></slot>
  </div>
</template>
<script setup>
import { ref } from 'vue';
const visible = ref(false);
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
const props = defineProps({
  fileType: {
    type: Number,
  },
  quantity: {
    type: Number,
  },
  name: {
    type: String,
  },
  type: {
    type: String,
  },
  smdNum: {
    type: Number,
  },
  warningTitle: {
    type: String,
  },
});
const emit = defineEmits(['getModea', 'getFlieData', 'scrollToSection']);

/**
 * 获取file文件
 * @param {*} file
 */
const uploadChange = (file) => {
  if (file.size > 50 * 1024 * 1024) {
    ElMessage.error(t('mall.upload_file_limit', { num: 50 }));
    return false;
  }
  if (props.fileType == '1') {
    if (!props.smdNum) {
      ElMessage.error(`${t('mall.select_smt_quantity')}`);
      const el = '#basicInfor';
      emit('scrollToSection', el);
      return false;
    }
    emit('getFlieData', file);
  } else {
    // 这是BOM
    visible.value = true;
    emit('getFlieData', file);
    emit('getModea', true);
  }
};
</script>
<style lang="scss" scoped>
:deep(.el-upload) {
  display: flex;
}
.upload-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 24px;
  border-radius: 8px;
  background: #f5f5f5;
  height: 100%;
  box-sizing: border-box;
  border: 1px solid #d9d9d9;
  .upload-btn {
    margin: 0 auto;
  }
  ::v-deep .el-button {
    font-weight: 400;
  }
  .upload-tips {
    width: 340px;
    color: #666666;
    font-size: 10px;
    line-height: 2;
    .accept {
      color: #ff0000;
    }
  }
}
</style>
